<template>
    <div class="inputNumber" :class="[classStyle]">
        <el-input-number v-model="minNum" controls-position="right" size="mini" placeholder='最小值' :min="0" 
            @change="getValue">
        </el-input-number>
        <span>~</span>
        <el-input-number v-model="maxNum" controls-position="right" size="mini" placeholder='最大值' :min="0"
            @change="getValue">
        </el-input-number>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                minNum: undefined,
                maxNum: undefined,
                obj:{}
            }
        },
        props:{
            label:[Array,Number],
            comData: {
                type: Object,
                default: () => {}
            },
            classStyle:{
                type:String,
                default:''
            }
        },
        mounted(){
            const {i_key,name,type} = this.comData
            this.obj.key = i_key
            this.obj[i_key] = []
            this.obj.chineseName = name
            this.obj.type = type
        },
        methods:{
            getValue(){
                this.obj[this.comData.i_key] = [this.minNum,this.maxNum]
            },
            editValue(fieldValue){
                this.minNum = fieldValue[0]
                this.maxNum = fieldValue[1]
                this.getValue()
            }
        },
    }
</script>

<style lang="less" scoped>
    .inputNumber {
        display: flex;

        span {
            flex: 2;
            text-align: center;
        }

        /deep/ .el-input-number.is-controls-right .el-input__inner{
            padding-left: 5px;
            padding-right: 30px;
        }

        /deep/ .el-input-number--mini {
            flex: 12;
        }
    }
    .inputNumber.dialog{
        width: 80%;
    }
</style>